import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter, Route } from 'react-router-dom';
import { Icon, Popover, Tools, ActivityIndicator, Result } from 'weaver-mobile';
import { ListViewPage, TabPage, RouteLayout, ShareAuth } from 'weaver-mobile-page';
import AuthorityAdd from '../form/AuthorityAdd';
import ChanceShareListStore from '../../stores/list/ChanceShareListStore'
const Item = Popover.Item;
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
    wrapProps = {
        onTouchStart: e => e.preventDefault(),
    };
}
const getLabel = Tools.getLabel;
@withRouter
@observer
export default class SellChanceShareList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chanceShareListStore: new ChanceShareListStore(),
            overlay: [
                (<Item key="4" value="scan" data-seed="logId">Scan</Item>),
                (<Item key="5" value="special" style={{ whiteSpace: 'nowrap' }}>My Qrcode</Item>),
                (<Item key="6" value="button ct">
                    <span style={{ marginRight: 5 }}>Help</span>
                </Item>),
            ],
            span: [7, 1]
        };
    }

    componentWillMount() {
        const { match, params } = this.props;
        let ps = params ? params : match.params;
        this.state.chanceShareListStore.doNew(this, { type: "crm_chance_share", ...ps });
    }

    componentDidMount() {
        this.state.chanceShareListStore.doInit();
    }

    componentWillUnmount() {
        this.state.chanceShareListStore.doClear();
    }

    render() {
        const store = this.state.chanceShareListStore;
        const { initResponsed, initSuccessed, initFailedMsg, shareAuthRoute } = store;
        if (initResponsed) {
            if (initSuccessed) {
                const { listTab, listTabIndex, listAd, list, showCheck, canEdit, createShareLayout, shareConditions, shareConditions1, doSave } = store;
                const { span, overlay, visible } = this.state;

                let tabProps = {
                    page: listTabIndex,
                    swipeable: true,
                    onChange: (tab) => {
                        store.topTabChange(tab.key);
                    }
                };

                const popoverProps = {
                    visible,
                    overlay,
                    onSelect: this.handleSelect,
                    onVisibleChange: this.handleVisibleChange,
                };

                let listViewPageProps = {};
                listViewPageProps.showCheck = showCheck;
                listViewPageProps.store = list;
                listViewPageProps.heightSpace = 50;
                const share = "";
                const btns = [];
                if (canEdit) {
                    btns.push(
                        <ShareAuth
                            customType={{
                                skipEntry: true,
                                conditionData: [shareConditions, shareConditions1]
                            }}
                            store={shareAuthRoute}
                            placeholder=""
                            onChange={(data) => doSave(data)}
                        >
                            <i className={'crm-nav-header-icon icon-crm icon-crm-add'} style={{ color: "#999" }} />
                        </ShareAuth>
                    );

                    listViewPageProps.withSwipeAction = true;
                    listViewPageProps.swipeActionProps = {
                        right: [
                            {
                                text: getLabel('23777', "删除"),
                                onPress: (data) => {
                                    store.deleteShare(data);
                                    console.log(data)
                                },
                                className: "crm-list-swipe-delete",
                            }
                        ],
                    }
                }

                return (
                    <div>
                        <TabPage
                            btns={btns}
                            span={span}
                            tabs={listTab}
                            tabProps={tabProps}
                            popover={false}
                            popoverProps={popoverProps}
                        >
                        </TabPage>
                        <ListViewPage.Normal {...listViewPageProps} />
                    </div >
                );
            } else {
                return (
                    <div>
                        <Result
                            img={<Icon type="cross-circle-o" className="crm_commerce_initFailedMsg" style={{ fill: '#F13642' }} />}
                            title=""
                            message={initFailedMsg}
                        />
                    </div>);
            }
        } else {
            return <div className="crm-bg-loading"><ActivityIndicator text="Loading..." /></div>;
        }
    }
}